<template>
  <div>
    <a-sub-menu v-if="!menuInfo.hidden" :key="menuInfo.path" v-bind="$props" v-on="$listeners">
      <span slot="title">
        <a-icon :type="menuInfo.meta.icon ? menuInfo.meta.icon : 'menu'" v-if="collapsed" />
        <span> 
          <!-- {{ menuInfo.meta.title }}  -->
          {{ menuInfo.meta.title }} 
        </span>
      </span>
      <template v-for="item in menuInfo.children">
        <a-menu-item v-if="!item.children && !item.hidden" :key="item.path">
          <span>
            <a-icon :type="item.meta.icon ? item.meta.icon : 'menu'" v-if="collapsed" />
            <span>
              <!-- {{ item.meta.title }} -->
               {{ item.meta.title }}
            </span>
          </span>
        </a-menu-item>
        <sub-menu v-else :key="item.path" :menu-info="item" />
      </template>
    </a-sub-menu>
  </div>
</template>
<script>
import { Menu } from 'ant-design-vue'
export default {
  name: 'subMenu',
  isSubMenu: true,
  props: {
    ...Menu.SubMenu.props,
    // Cannot overlap with properties within Menu.SubMenu.props
    menuInfo: {
      type: Object,
      default: () => ({}),
    },
    collapsed: {
      type: Boolean,
      default: false,
    },
  },
  components: {},
  data() {
    return {}
  },
  mounted() {},
  methods: {
    menuHandle(item) {
      this.$router.push({ path: item.path })
    },
  },
}
</script>
<style scoped>
/deep/.ant-divider-inner-text {
  padding: 0 0px;
  color: rgba(0, 0, 0, 0.5);
}
/deep/.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected{
  background-color: #e6f7ff !important;
}
</style>